import React from 'react'
import { withRouter } from 'react-router-dom'
//导入connect方法
import { connect } from 'react-redux'

import './topheader.scss'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Layout, Dropdown, Menu, Avatar, Image } from 'antd';
const { Header } = Layout;

function TopHeader(props) {
    // 从本地存储中取得token等
    const {role:{roleName},userName} = JSON.parse(localStorage.getItem("token"))
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <span>{roleName}</span>
                    ),
                },
                {
                    key: '2',
                    danger: true,
                    label: (
                        <div onClick={() => {
                            localStorage.removeItem("token")
                            props.history.replace("/login")
                        }}>退出登录</div>
                    )
                },
            ]}
        />
    );
    
    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: () => props.changeCollapsed(),
            })}
            <div className="right">
                <span>欢迎你，<span style={{ fontWeight:'bold' }}>{userName}</span>！</span>
                <Dropdown overlay={menu}>
                    <Avatar size={40} src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 40 }} />} />
                </Dropdown>
            </div>
        </Header>
    )
}
const mapStateToProps = (state) => { 
    return ({
        collapsed:state.sidebarReducer.isCollapsed
    })
}
// 发送dispach
const mapDispatchToProps = {
    changeCollapsed() { 
        return {
            type: 'change_collapsed',
            // payload:
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader))